<template>
    <div class="login">
        <h2>登陆</h2>
        <div class="login1">
            <!--  element-ui重写  label-width="80px"-->
            <el-form ref="form" :model="sub" label-width="80px">
                <el-form-item label="用户名">
                    <el-input v-model="sub.username"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input v-model="sub.password" show-password></el-input>
                </el-form-item>
                <el-form-item label="性别">
                    <el-select v-model="sub.sex" placeholder="请选择性别">
                        <el-option label="男" value="男"></el-option>
                        <el-option label="女" value="女"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="角色">
                    <el-select placeholder="请选择角色" v-model="role">
                        <el-option label="系统管理员" value="系统管理员"></el-option>
                        <el-option label="后台数据操作人员" value="后台数据操作人员"></el-option>
                        <el-option label="话务分析" value="话务分析"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="dologin">登录</el-button>
                    <el-button @click="exitdocument">取消</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script>
import axios from 'axios'
export default {
    data() {
        return {
            sub: {
                username: '',
                password: '',
                sex: ''
            },
            get: '',
            role: ''

        }
    },
    methods: {
        dologin() {
            axios.get('http://127.0.0.1:7001/login').then(res => {
                this.get = res.data;
                console.log(this.get);
                this.get.forEach((item) => {
                    if (this.sub.username == item.username && this.sub.password == item.password) {
                        if (item.type == "系统管理员" && this.role == "系统管理员") {
                            this.$router.push('/Syscontrol');
                        } else if (item.type == "后台数据操作人员" && this.role == "后台数据操作人员") {
                            this.$router.push('/Backdatacontrol');
                        } else if (item.type == "话务分析" && this.role == "话务分析") {
                            this.$router.push('/AboutView');
                        }
                        else {
                            // this.$router.push('/');
                            alert('密码或账户错误');
                        }
                    }
                })
            });
        },
        //退出当前页面
        exitdocument() {
            this.$router.push('/');
        },
    }
}
</script>
<style>
.login {
    text-align: center;
    margin: 0 auto;
    width: 600px;
    height: 520px;

}

.login h2 {
    margin-top: 40px;
    color: aliceblue;
    font-weight: 100;
}

.login1 {
    width: 90%;
}
</style>